<template>
  <el-header class="global-header">
    <div class="nav-container">
      <!-- 左侧 Logo + 标题 + 菜单 -->
      <div class="left-bar">
        <div class="logo-bar">
          <img class="logo" src="/src/assets/img.png" alt="logo" />
          <div class="title">lsOJ</div>
        </div>

        <el-menu
            mode="horizontal"
            :default-active="activeMenu"
            @select="handleSelect"
            class="menu"

            :ellipsis="false"  >
          <el-menu-item index="/questions">题库</el-menu-item>
          <el-menu-item index="/community">讨论</el-menu-item>
          <el-menu-item index="/more">更多</el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧 用户信息 / 登录注册 -->
      <div class="right-bar">
        <template v-if="!userStore.user">
          <el-button type="text" @click="router.push('/user/login')">登录</el-button>
          <el-button type="primary" @click="router.push('/user/register')">注册</el-button>
        </template>
        <template v-else>
          <el-dropdown>
            <span class="el-dropdown-link user-info">
              <el-avatar :src="userStore.user.userAvatar" size="small" />
              <span class="username">{{ userStore.user.userName }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/user/profile')">个人中心</el-dropdown-item>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </div>
    </div>
  </el-header>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user.ts'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const activeMenu = ref<string>(route.path)

watch(
    () => route.path,
    (newPath) => {
      activeMenu.value = newPath
    }
)

const handleSelect = (key: string) => {
  router.replace(key)
}

const handleLogout = () => {
  userStore.logout()
  localStorage.removeItem('user')
  router.replace('/')
}
</script>

<style scoped>
.global-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
}

.nav-container {
  display: flex;
  justify-content: space-between; /* 左右分布 */
  align-items: center;
  width: 100%;
  white-space: nowrap; /* 不换行，防止折叠 */
  overflow-x: auto;    /* 屏幕窄时允许横向滚动，而不是换行 */
}

.left-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.logo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo {
  height: 32px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.menu {
  border-bottom: none;
  flex-shrink: 0;
}

.menu ::v-deep(.el-menu-item) {
  font-size: 16px;
  padding: 0 18px !important;
}

.right-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.username {
  font-size: 14px;
  color: #333;
}
</style>
